<template>
    <div class="TopivCom">
        <h1>考试结果</h1>
        <h1>
            <span>{{user.name}}</span>
            <span>得分：{{score}} / {{sum}}</span>
        </h1>
        <ul>
            <li v-for="(item,index) in list" :key="index">
                <span :class="style=item.keyVal===item.key?'true':'error'">
                    题号：{{item.id}}. -------
                    <span v-if="item.keyVal===item.key">√</span>
                    <span v-else>×</span> -------
                    分值：{{item.grade}}
                </span>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        props: {
            user: {
                type: Object,
                default() {
                    return {}
                }
            }
        },
        data () {
            return {
                list: [],
                style: ""
            }
        },
        computed: {
            score() {
                var _score = 0
                this.list.forEach((val) => {
                    if (val.keyVal === val.key) {
                        _score += val.grade
                    }
                })
                return _score
            },
            sum() {
                var _sum = 0
                this.list.forEach((val) => {
                    _sum += val.grade
                })
                return _sum
            }
        },
        mounted () {
            bus.$on("submitList", (list) => {
                this.list = list
            })
        }
    }
</script>

<style scoped lang="less">
    .TopivCom {
        padding: 25px;
        line-height: 25px;
        margin-top: 5%;
        text-align: center;
        h1 {
            margin-top: 10%;
            font-size: 1.5em;
            font-family: Arial, Helvetica, sans-serif;
        }
        ul {
            margin-top: 15%;
            li {
                margin-top: 15px;
            }
        }
    }
    .true {
        color: rgb(64, 158, 255);
    }
    .error {
        color: red;
    }
</style>